<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding:0;
            list-style: none;
        }
        ul{
            width: 500px;
            border: 10px solid red;
            /* 将ul设置为弹性容器 */
            display: flex;

            /* 
                  flex-direction 指定容器中弹性元素的排列方式  
                  可选值
                    row默认值,弹性元素在容器中水平排列(左向右)
                        -主轴 自左向右
                    row-reverse 弹性元素在容器中反向水平排列
                        -主轴 自右向左
                    column      弹性元素纵向排列(自上向下)
                        -主轴 自上向下
                    column-reverse 弹性元素在容器中反向垂直排列
                        -主轴 自下向上

                    主轴:
                        弹性元素的排列方向称为主轴

                    侧轴
                        与主轴垂直方向的称为侧轴
                */
            flex-direction: row-reverse;
        }
        li{
            width: 500px;
            height: 100px;
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
            /* 
                    弹性元素的属性
                        flex-grow 指定弹性元素的伸展的系数
                        -当父元素有多余的空间时,子元素如何伸展
                        -父元素的剩余空间,会按照比列进行分配

                        flex-shrink指定弹性元素的收缩系数
                        -当父元素中的空间不足以容纳所有的子元素时,如果对子元素进行收缩
            */
            /* flex-grow: 1; */

            flex-shrink:1;
            
        }
        li:nth-child(1){
            /* flex-grow: 1; */
        }
        li:nth-child(2){
            background-color: pink;
            /* flex-grow: 2; */
        }
        li:nth-child(3){
            background-color: orange;
            /* flex-grow: 3; */
        }
    </style>
</head>
<body>
    <!-- 
        flex(弹性盒,收缩盒)
            -是css中宽度又一种布局手段,它主要用来代替浮动来完成页面的布局
            -flex可以使元素具有弹性,让元素可以跟随页面的大小的改变而改变
            -弹性容器
                -要使用弹性盒,必须先将一个元素设置为弹性容器
                -我们通过display来设置弹性容器
                    display:flex设置为块级弹性容器
                    display:inline-flex 设置为行内弹性容器

            -弹性元素
                -弹性容器的直接子元素(不是后代元素)是弹性元素(弹性项)
                -一个元素可以同时是弹性容器和弹性元素

     -->
     <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
     </ul>
</body>
</html>